<template>
  <div>
    <el-dialog title="新建客户" :visible.sync="dialogVisible" width="80%">
      <div>
        <create-sections title="基本信息">

          <el-form ref="crmForm" :model="fieldForm" :rules="fieldRules" :validate-on-rule-change="false" class="rp-form"
            inline label-position="top">
            <form-item-more v-for="(children, index) in columnList" :key="index" :field-from="fieldForm"
              :field-list="children" :ignore-fields="['leadsName']" @change="formChange">
            </form-item-more>
          </el-form>


        </create-sections>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">保 存</el-button>
        <el-button type="primary" @click="dialogVisible = false">保存并新建联系人</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <customerRelation ref="customerRelation" :action="createAction" @save-success="saveSuccess" />
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import addCustomer from "./addCustomer.js";
import CreateSections from "@/components/CreateSections";
import FormItemMore from '@/components/busComponents/NewComponents/BusForm/FormItemMore'
import { isEmpty } from '@/utils/types'
import CustomFieldsMixin from '@/mixins/CustomFields'
import customerRelation from '@/components/customerManage/customerRelation.vue'

export default {
  name: "addCustomer",
  components: { CreateSections, FormItemMore, customerRelation },
  mixins: [CustomFieldsMixin],
  props: {
    phone: String,
    action: {
      type: Object,
      default: () => {
        return {
          type: "save",
          id: "",
          data: {},
        };
      },
    },
  },
  data () {
    return {
      dialogVisible: false,
      loading: false,
      baseFields: [],
      columnList: [],
      fieldForm: {},
      fieldRules: {},
      form: {
        name: '',
      },
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      optionsAdd: [{
        value: 'zhinan',
        label: '指南',
        children: [{
          value: 'shejiyuanze',
          label: '设计原则',
          children: [{
            value: 'yizhi',
            label: '一致'
          }, {
            value: 'fankui',
            label: '反馈'
          }, {
            value: 'xiaolv',
            label: '效率'
          }, {
            value: 'kekong',
            label: '可控'
          }]
        }, {
          value: 'daohang',
          label: '导航',
          children: [{
            value: 'cexiangdaohang',
            label: '侧向导航'
          }, {
            value: 'dingbudaohang',
            label: '顶部导航'
          }]
        }]
      }, {
        value: 'ziyuan',
        label: '资源',
        children: [{
          value: 'axure',
          label: 'Axure Components'
        }, {
          value: 'sketch',
          label: 'Sketch Templates'
        }, {
          value: 'jiaohu',
          label: '组件交互文档'
        }]
      }],
      value: '',
      value1: '',
      tableData: [],
      // 工商信息
      businessInfo: null,
      businessInfoViewShow: false,
      createAction: {},
    };
  },
  computed: {
    ...mapGetters(['crm', 'moduleData']),
    // 如果有次数就可以使用
    canUseEnterprise () {
      const enterprise = this.moduleData.find(item => item.module === 'enterprise')
      return enterprise ? enterprise.number > 0 : false
    },
    contactsSaveAuth () {
      return this.crm.contacts && this.crm.contacts.save
    },
    title () {
      return this.action.type === 'update' ? '编辑客户' : '新建客户'
    }
  },
  methods: {
    formChange(field, index, value, valueList) {
      if(field.formType == "add_table"){
        this.$refs.customerRelation.showRelationFun();
      }
      console.log("field---------",field)
    },
    cellClass ({ row, column, rowIndex, columnIndex }) {
      if (column.property === 'merchantNum') {
        return 'look--underline'
      } else {
        return ''
      }
    },
    addCustomer () {
      this.createAction = {
        type: 'save',
        id: '',
        data: {}
      }
      this.$refs.customerRelation.showRelationFun();
    },
    saveSuccess (data) {
      if (data.type == 'customer') {
        // this.handleHandle(data) ---刷新列表
        if (data.createContacts) {
          // this.createType = 'contacts'
          this.createAction = {
            type: 'relative',
            crmType: 'customer',
            data: {
              customer: data.data
            }
          }
          this.createShow = true
        }
      }
    },
    showFun () {
      this.dialogVisible = true;
      this.queryListHead()
    },
    closeFun () {
      this.dialogVisible = false;
    },
    queryListHead () {
      this.loading = true
      let res = {
        "code": 0,
        "msg": "success",
        "data": [
          [
            {
              "fieldId": "1481534108946325504",
              "fieldName": "superiorCustomerId",
              "formType": "add_table",
              "name": "上级客户",
              "type": 15,
              "inputTips": null,
              "maxLength": null,
              "defaultValue": "",
              "isUnique": 0,
              "isNull": 0,
              "options": null,
              "fieldType": 1,
              "operating": 191,
              "setting": [],
              "authLevel": 3,
              "value": null,
              "sysInformation": null,
              "isOut": null,
              "isHidden": 0,
              "autoGeneNumber": null,
              "sorting": 0,
              "stylePercent": 100,
              "maxNumRestrict": null,
              "minNumRestrict": null,
              "precisions": null,
              "formPosition": "0,0",
              "formAssistId": "1481534108946325504",
              "optionsData": null,
              "fieldExtendList": null,
              "remark": null,
              "xaxis": 0,
              "yaxis": 0
            }
          ],
          [
            {
              "fieldId": "1481534108921159682",
              "fieldName": "customerName",
              "formType": "text",
              "name": "客户名称",
              "type": 1,
              "inputTips": null,
              "maxLength": 255,
              "defaultValue": "",
              "isUnique": 1,
              "isNull": 1,
              "options": null,
              "fieldType": 1,
              "operating": 189,
              "setting": [],
              "authLevel": 3,
              "value": null,
              "sysInformation": null,
              "isOut": null,
              "isHidden": 0,
              "autoGeneNumber": null,
              "sorting": 1,
              "stylePercent": 25,
              "maxNumRestrict": null,
              "minNumRestrict": null,
              "precisions": null,
              "formPosition": "1,0",
              "formAssistId": "1481534108921159682",
              "optionsData": null,
              "fieldExtendList": null,
              "remark": null,
              "xaxis": 1,
              "yaxis": 0
            },
            {
              "fieldId": "1481534108933742592",
              "fieldName": "source",
              "formType": "select",
              "name": "客户来源",
              "type": 3,
              "inputTips": null,
              "maxLength": null,
              "defaultValue": "",
              "isUnique": 0,
              "isNull": 0,
              "options": "促销,搜索引擎,广告,转介绍,线上注册,线上询价,预约上门,陌拜,电话咨询,邮件咨询",
              "fieldType": 2,
              "operating": 191,
              "setting": [
                "促销",
                "搜索引擎",
                "广告",
                "转介绍",
                "线上注册",
                "线上询价",
                "预约上门",
                "陌拜",
                "电话咨询",
                "邮件咨询"
              ],
              "authLevel": 3,
              "value": null,
              "sysInformation": null,
              "isOut": null,
              "isHidden": 0,
              "autoGeneNumber": null,
              "sorting": 2,
              "stylePercent": 25,
              "maxNumRestrict": null,
              "minNumRestrict": null,
              "precisions": 2,
              "formPosition": "1,1",
              "formAssistId": "1481534108933742592",
              "optionsData": null,
              "fieldExtendList": null,
              "remark": null,
              "xaxis": 1,
              "yaxis": 1
            },
            {
              "fieldId": "1481534108937936896",
              "fieldName": "mobile",
              "formType": "mobile",
              "name": "手机",
              "type": 7,
              "inputTips": null,
              "maxLength": 255,
              "defaultValue": "",
              "isUnique": 0,
              "isNull": 0,
              "options": null,
              "fieldType": 1,
              "operating": 191,
              "setting": [],
              "authLevel": 3,
              "value": null,
              "sysInformation": null,
              "isOut": null,
              "isHidden": 0,
              "autoGeneNumber": null,
              "sorting": 3,
              "stylePercent": 25,
              "maxNumRestrict": null,
              "minNumRestrict": null,
              "precisions": null,
              "formPosition": "1,2",
              "formAssistId": "1481534108937936896",
              "optionsData": null,
              "fieldExtendList": null,
              "remark": null,
              "xaxis": 1,
              "yaxis": 2
            }
          ],
          [
            {
              "fieldId": "1481534108937936897",
              "fieldName": "telephone",
              "formType": "text",
              "name": "电话",
              "type": 1,
              "inputTips": null,
              "maxLength": 255,
              "defaultValue": "",
              "isUnique": 0,
              "isNull": 0,
              "options": null,
              "fieldType": 1,
              "operating": 191,
              "setting": [],
              "authLevel": 3,
              "value": null,
              "sysInformation": null,
              "isOut": null,
              "isHidden": 0,
              "autoGeneNumber": null,
              "sorting": 4,
              "stylePercent": 50,
              "maxNumRestrict": null,
              "minNumRestrict": null,
              "precisions": null,
              "formPosition": "2,0",
              "formAssistId": "1481534108937936897",
              "optionsData": null,
              "fieldExtendList": null,
              "remark": null,
              "xaxis": 2,
              "yaxis": 0
            },
            {
              "fieldId": "1481534108942131202",
              "fieldName": "email",
              "formType": "email",
              "name": "邮箱",
              "type": 14,
              "inputTips": null,
              "maxLength": 255,
              "defaultValue": "",
              "isUnique": 0,
              "isNull": 0,
              "options": null,
              "fieldType": 1,
              "operating": 191,
              "setting": [],
              "authLevel": 3,
              "value": null,
              "sysInformation": null,
              "isOut": null,
              "isHidden": 0,
              "autoGeneNumber": null,
              "sorting": 5,
              "stylePercent": 50,
              "maxNumRestrict": null,
              "minNumRestrict": null,
              "precisions": null,
              "formPosition": "2,1",
              "formAssistId": "1481534108942131202",
              "optionsData": null,
              "fieldExtendList": null,
              "remark": null,
              "xaxis": 2,
              "yaxis": 1
            }
          ],
          [
            {
              "fieldId": "1481534108937936898",
              "fieldName": "website",
              "formType": "website",
              "name": "网址",
              "type": 1,
              "inputTips": null,
              "maxLength": 255,
              "defaultValue": "",
              "isUnique": 0,
              "isNull": 0,
              "options": null,
              "fieldType": 1,
              "operating": 191,
              "setting": [],
              "authLevel": 3,
              "value": null,
              "sysInformation": null,
              "isOut": null,
              "isHidden": 0,
              "autoGeneNumber": null,
              "sorting": 6,
              "stylePercent": 50,
              "maxNumRestrict": null,
              "minNumRestrict": null,
              "precisions": null,
              "formPosition": "3,0",
              "formAssistId": "1481534108937936898",
              "optionsData": null,
              "fieldExtendList": null,
              "remark": null,
              "xaxis": 3,
              "yaxis": 0
            },
            {
              "fieldId": "1481534108937936899",
              "fieldName": "industry",
              "formType": "select",
              "name": "客户行业",
              "type": 3,
              "inputTips": null,
              "maxLength": null,
              "defaultValue": "",
              "isUnique": 0,
              "isNull": 0,
              "options": "IT,金融业,房地产,商业服务,运输/物流,生产,政府,文化传媒",
              "fieldType": 2,
              "operating": 191,
              "setting": [
                "IT",
                "金融业",
                "房地产",
                "商业服务",
                "运输/物流",
                "生产",
                "政府",
                "文化传媒"
              ],
              "authLevel": 3,
              "value": null,
              "sysInformation": null,
              "isOut": null,
              "isHidden": 0,
              "autoGeneNumber": null,
              "sorting": 7,
              "stylePercent": 50,
              "maxNumRestrict": null,
              "minNumRestrict": null,
              "precisions": 2,
              "formPosition": "3,1",
              "formAssistId": "1481534108937936899",
              "optionsData": null,
              "fieldExtendList": null,
              "remark": null,
              "xaxis": 3,
              "yaxis": 1
            }
          ],
          [
            {
              "fieldId": "1481534108937936900",
              "fieldName": "level",
              "formType": "select",
              "name": "客户级别",
              "type": 3,
              "inputTips": null,
              "maxLength": null,
              "defaultValue": "",
              "isUnique": 0,
              "isNull": 0,
              "options": "A（重点客户）,B（普通客户）,C（非优先客户）",
              "fieldType": 2,
              "operating": 191,
              "setting": [
                "A（重点客户）",
                "B（普通客户）",
                "C（非优先客户）"
              ],
              "authLevel": 3,
              "value": null,
              "sysInformation": null,
              "isOut": null,
              "isHidden": 0,
              "autoGeneNumber": null,
              "sorting": 8,
              "stylePercent": 50,
              "maxNumRestrict": null,
              "minNumRestrict": null,
              "precisions": 2,
              "formPosition": "4,0",
              "formAssistId": "1481534108937936900",
              "optionsData": null,
              "fieldExtendList": null,
              "remark": null,
              "xaxis": 4,
              "yaxis": 0
            },
            {
              "fieldId": "1481534108942131200",
              "fieldName": "nextTime",
              "formType": "datetime",
              "name": "下次联系时间",
              "type": 13,
              "inputTips": null,
              "maxLength": null,
              "defaultValue": "",
              "isUnique": 0,
              "isNull": 0,
              "options": null,
              "fieldType": 1,
              "operating": 63,
              "setting": [],
              "authLevel": 3,
              "value": null,
              "sysInformation": null,
              "isOut": null,
              "isHidden": 0,
              "autoGeneNumber": null,
              "sorting": 9,
              "stylePercent": 50,
              "maxNumRestrict": null,
              "minNumRestrict": null,
              "precisions": null,
              "formPosition": "4,1",
              "formAssistId": "1481534108942131200",
              "optionsData": null,
              "fieldExtendList": null,
              "remark": null,
              "xaxis": 4,
              "yaxis": 1
            }
          ],
          [
            {
              "fieldId": "1481534108942131201",
              "fieldName": "remark",
              "formType": "textarea",
              "name": "备注",
              "type": 2,
              "inputTips": null,
              "maxLength": 255,
              "defaultValue": "",
              "isUnique": 0,
              "isNull": 0,
              "options": null,
              "fieldType": 1,
              "operating": 191,
              "setting": [],
              "authLevel": 3,
              "value": null,
              "sysInformation": null,
              "isOut": null,
              "isHidden": 0,
              "autoGeneNumber": null,
              "sorting": 10,
              "stylePercent": 50,
              "maxNumRestrict": null,
              "minNumRestrict": null,
              "precisions": null,
              "formPosition": "5,0",
              "formAssistId": "1481534108942131201",
              "optionsData": null,
              "fieldExtendList": null,
              "remark": null,
              "xaxis": 5,
              "yaxis": 0
            }
          ],
          [
            {
              "fieldId": null,
              "fieldName": "mapAddress",
              "formType": "map_address",
              "name": "地区定位",
              "type": 18,
              "inputTips": null,
              "maxLength": null,
              "defaultValue": null,
              "isUnique": null,
              "isNull": 0,
              "options": null,
              "fieldType": 1,
              "operating": null,
              "setting": [],
              "authLevel": null,
              "value": {
                "address": null,
                "lng": null,
                "detailAddress": null,
                "location": null,
                "lat": null
              },
              "sysInformation": null,
              "isOut": null,
              "isHidden": null,
              "autoGeneNumber": null,
              "sorting": null,
              "stylePercent": 100,
              "maxNumRestrict": null,
              "minNumRestrict": null,
              "precisions": null,
              "formPosition": null,
              "formAssistId": null,
              "optionsData": null,
              "fieldExtendList": null,
              "remark": null,
              "xaxis": null,
              "yaxis": null
            }
          ]
        ]
      }

      let list = JSON.parse(JSON.stringify(res)).data ;

      const assistIds = this.getFormAssistIds(list)

      const baseFields = []
      const fieldList = []
      const fieldRules = {}
      const fieldForm = {}
      list.forEach(children => {
        const fields = []
        children.forEach(item => {
          const temp = this.getFormItemDefaultProperty(item)
          temp.show = !assistIds.includes(item.formAssistId)

          const canEdit = this.getItemIsCanEdit(item, this.action.type)
          // 是否能编辑权限
          if (temp.show && canEdit) {
            fieldRules[temp.field] = this.getRules(item)
          }

          // 是否可编辑
          temp.disabled = !canEdit

          // 特殊字段允许多选
          this.getItemRadio(item, temp)

          // 获取默认值
          if (temp.show) {
            fieldForm[temp.field] = this.getItemValue(item, this.action.data, this.action.type)
          }
          fields.push(temp)
          baseFields.push(item)
        })
        fieldList.push(fields)
      })

      this.baseFields = baseFields
      this.columnList = fieldList
      this.fieldForm = fieldForm
      this.fieldRules = fieldRules

        console.log("columnList=====",this.columnList)

        this.loading = false
    },
    /**
     * @description: 查看工商详情
     * @param {*}
     * @return {*}
     */
    checkBIDetail () {
      if (!this.canUseEnterprise) return
      this.businessInfoViewShow = true
    }
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/custom-element.scss";

.div-flex {
  flex: 1;
  margin-right: 22px;
}

.add-customer {
  font-size: 16px;
  font-weight: 400;
  color: #204EC4;
  line-height: 36px;
  position: absolute;
  top: 0;
  right: 0;

}
</style>